<script setup lang="ts">
import { nextTick, reactive, ref } from "vue";
import { numberApi } from "@/api/controller";
import { ToastSuccess, ToastWarning, Toastloading } from "@/utils/public";
import { ElMessageBox } from "element-plus";
import xmImage from '@/components/xmImage/index.vue';
import xmUpload from "@/components/Upload/xm-upload.vue";
const $emit = defineEmits(['updateList'])
const action = reactive({
  dialogFormVisible: false,
  user_id:0,
  portrait:'',
  price_list:[] as Array<any>,
});
const uploadFileSuccess = (fileArr:Array<any>)=>{
  const list = fileArr.map(url=>{
    return {
      price_key:-1,
      price_value:url
    }
  })
  action.price_list = [...action.price_list, ...list]
}
const uploadPortraitSuccess = async(fileArr:Array<any>)=>{
  const head_img = fileArr[fileArr.length - 1]
  if(!head_img) return ToastWarning('head_img error')
  const loading = Toastloading();
  await numberApi.setUserHeadImg({
    user_id:action.user_id,
    head_img
  })
  loading.close();
  closeDialog()
  $emit('updateList')
  ToastSuccess("上传成功!");
}
const handleSubmit = async()=>{
  const loading = Toastloading();
  const portraits = action.price_list.map(res=>{
    return res.price_value
  }).toString()
  await numberApi.setUserPortrait({
    user_id:action.user_id,
    portraits
  })
  loading.close();
  closeDialog()
  $emit('updateList')
  ToastSuccess("保存成功!");
}
const delPriceWall = (scope:any = {}) => {
  const { $index:index = -1, row={} } = scope
  if(index == -1) return
  ElMessageBox.confirm("确定执行此操作吗?", "提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    action.price_list.splice(index,1)
    ToastSuccess("删除成功!");
  }).catch(() => { });
};
const handlesetUp = async(scope:any = {})=>{
  const { $index:index = -1, row={} } = scope
  let list = JSON.parse(JSON.stringify(action.price_list))
  const obj = list.splice(index,1)[0]
  list.unshift(obj)
  action.price_list = list
  ToastSuccess("设置成功!");
}
const getlist = async()=>{
  const res = await numberApi.userPriceWall(action.user_id);
  action.price_list = res.data;
}
const openDialog = async (query: any = {}) => {
  closeDialog();
  const loading = Toastloading();
  const { user_id=0, portrait='' } = query;
  action.user_id = user_id;
  action.portrait = portrait
  await getlist()
  loading.close();
  action.dialogFormVisible = true;
};
const closeDialog = () => {
  Object.assign(action,{
    dialogFormVisible:false,
    user_id:0,
    portrait:'',
    price_list:[]
  })
};
defineExpose({
  openDialog,
});
</script>

<template>
  <div>
    <el-dialog
      top="5vh"
      class="xm-dialog"
      v-model="action.dialogFormVisible"
      title="照片墙"
      :close-on-click-modal="false"
      :show-close="false"
      :close-on-press-escape="false"
    >
      <div class="xm-mb10 labelBox ">
        <xmUpload
          :data="{type:1}"
          listType="text"
          :limit="0"
          multiple
          :showFileList="false"
          but-text="上传照片墙"
          @success="uploadFileSuccess"
        />
        <xmUpload
          class="xm-ml10"
          :data="{type:1}"
          listType="text"
          :limit="0"
          :showFileList="false"
          but-text="上传头像"
          @success="uploadPortraitSuccess"
        />
      </div>
      <el-table :data="action.price_list" border>
        <el-table-column min-width="200" align="center" label="头像">
          <template #default="scope">
            <xmImage 
              style="width: 100px; height: 100px"
              :src="scope.row.price_value"
              :preview-src-list="[scope.row.price_value]"
            />
          </template>
        </el-table-column>
        <el-table-column label="操作" align="center">
          <template #default="scope">
            <el-button v-if="scope.$index > 0" text type="primary" @click="handlesetUp(scope)">设为头像</el-button>
            <el-button text type="danger" @click="delPriceWall(scope)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeDialog">取 消</el-button>
          <el-button type="primary" @click="handleSubmit()">保 存</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
:deep(.xm-dialog) {
  .el-dialog__body {
    height: 65vh;
    overflow-y: auto;
  }
}
</style>
